<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        ul li {
            list-style: none;
        }
        .carousel {
            position: relative;
            width: 700px;
            height: 360px;
            margin: 50px auto;
            border: 1px solid #ccc;
        }
        .carousel ul li {
            position: absolute;
            top: 0;
            height: 360px;
            perspective: 50000px;
            transform-style: preserve-3d;
            transition: all 1s ease 0s;
        }
        .carousel ul li div {
            position: absolute;
            width: 100%;
            height: 360px;
            left: 0;
            top: 0;
            background-size: 700px 360px;
        }
        .carousel ul li div:nth-child(1) {
            background-image: url(images/pic1.jpg);
            transform: translateZ(180px);
        }
        .carousel ul li div:nth-child(2) {
            background-image: url(images/pic2.jpg);
            transform: rotateX(90deg) translateZ(180px);
        }
        .carousel ul li div:nth-child(3) {
            background-image: url(images/pic3.jpg);
            transform: rotateX(180deg) translateZ(180px);
        }
        .carousel ul li div:nth-child(4) {
            background-image: url(images/pic4.jpg);
            transform: rotateX(270deg) translateZ(180px);
        }
        .btn {
            display: block;
            width: 100px;
            height: 50px;
            margin: 0 auto;
            background-color: lightcoral;
            color: white;
            border: 0;
        }
    </style>
</head>
<body>
    <div class="carousel">
        <ul>
        </ul>
    </div>
    <input class="btn" type="button" value="下一张">
    <script src="js/jquery-1.12.4.min.js"></script>
    <script>
        // 升级
    // 1.动态的根据指定的数量，添加 li 标签的个数
    var len = 100;
    // 过渡动画时间
    var duration = 1;
    // 延时时间
    var delay = 0.005
    var $carousel = $(".carousel");
    var $ul = $(".carousel ul")
    // 给 ul 添加 len 个 li 标签
    for (var i = 0 ; i < len; i++) {
      // 动态创建一个 li 标签添加给 ul
      var li = $("<li><div></div><div></div><div></div><div></div></li>");
      $ul.append(li);
    }
    // 获取元素
    var $lis = $(".carousel ul li");
    var $btn = $(".btn");
    // 2.动态的设置每个 li 标签的宽度
    // 3.动态设置每个 li 标签的位置
    // 4.动态设置每个 li 中所有 div 的背景定位
    // 计算宽度
    var liWidth = $carousel.width() / len;
    $lis.each(function (i) {
      $(this).css({
        "width": liWidth,
        "left": i * liWidth,
        "transition-duration": duration + "s"
      })
      // 设置子级div的背景定位
      $(this).children().css("background-position", - i * liWidth + "px 0")
    })
    // 信号量编程
    var sem = 0;
    // 设置函数节流的 锁，避免用户频繁点击出现动画累积
    var lock = false;
    // 添加点击事件：让每个 li 每次旋转 90 度
    $btn.click(function () {
      // 函数节流
      if (lock) return;
      // 一旦动画开始，要锁住动画
      lock = true;
      // 信号量自减 90 度
      sem -= 90;
      // 建议使用 css3 的过渡动画更改 li
      // 对所有的 li 标签调用 each 方法
      $lis.each(function (i) {
        $(this).css({
          "transform": "rotateX("+sem+"deg)",
          "transition-delay": i * delay + "s"
        })
      })
      // 计算运动总时间
      var time = 1000 * duration + 1000 * delay * ($lis.length - 1);
      // 等运动彻底结束后，要解开锁
      setTimeout(function () {
        lock = false;
      },time);
    })
  </script>
</body>
</html>